<template>
	<view class="padding-lr-sm">
		<view class="comment-cont" v-if="info.nickname">
			<view class="comment-item target">
				<view class="comment-item-avatar">
					<image :src="info.avatar"/>
				</view>
				<view class="comment-item-cont">
					<view class="desc">
						<view class="desc-left">
							<text class="text-1">{{info.nickname}}</text>
							<text class="text-2">{{info.create_time}}</text>
							<text class="text-3">{{info.content}}</text>
						</view>
						<view class="desc-right">
							<h-comment-like :item="info"/>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="comment-item" v-for="(item,index) of list" :key="item.id">
					<view class="comment-item-avatar">
						<image :src="item.avatar" />
					</view>
					<view class="comment-item-cont">
						<view class="desc">
							<view class="desc-left">
								<text class="text-1">{{item.nickname}}</text>
								<text class="text-2">{{item.create_time}}</text>
								<text class="text-3">{{item.content}}</text>
							</view>
							<view class="desc-right">
								<h-comment-like :item="item" :type="1"/>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="dan-wrap padding-lr-sm" :style="{bottom:`${InputBottom}px`}">
				<view class="input-wrap">
					<input placeholder="输入评论内容" class="input-cont" placeholder-style="color:#999999;font-size:24rpx" :adjust-position="false" @focus="InputFocus" @blur="InputBlur"  confirm-type="send" v-model="content" @confirm="handleCommit"/>
				</view>
				<view>
					<button class="cu-btn round margin-left-xs" style="height:60upx;background-color: #E24E47;color: #fff;" @click="handleCommit">
						发布
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HCommentLike from "@/components/HCommentLike"
	export default {
		data(){
			return {
				id:0,
				info:{},
				list:[],
				InputBottom:0,
				content:""
			}
		},
		components:{
			HCommentLike
		},
		methods:{
			InputFocus(e) {
			  this.InputBottom = e.detail.height
			},
			InputBlur(e) {
			  this.InputBottom = 0
			},
			async getCommentDetail(){
				let query = {
					id:this.id
				}
				let {
					data
				} = await this.$h.api.commentModel.getCommentDetail(query)
				this.info=data[0]
				this.list=data[0].comments
			},
			async handleCommit(){
				if(this.checkUserInfo()){
					if(!this.content){
						this.$h.toast('评论不能为空')
						return
					}
					if(this.content.length<2){
						this.$h.toast('评论内容不能小于2')
						return
					}
					let query={
						comment_id:this.info.id,
						content:this.content
					}
					let {code}=await this.waitingLoading(this.$h.api.commentModel.postCommentReply,true)(query)
					if(code===1){
						this.content=""
						uni.$emit("updateComment")
						this.getCommentDetail()
					}
				}
			}
		},
		onLoad({id}){
			this.id=id
			this.getCommentDetail()
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.comment-cont {
		display: flex;
		flex-direction: column;
		.target{
			border-bottom:1px solid rgba(237,237,237,1);
			padding-bottom:40rpx;
		}
		.comment-item {			
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			&-avatar {
				width: 50rpx;
				height: 50rpx;
			
				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
			}
			
			&-cont {
				flex: 1;
				padding-left: 20rpx;
			
				.desc {
					display: flex;
					justify-content: space-between;
					color: #343436;
			
					&-left {
						display: flex;
						flex-direction: column;
			
						.text-1 {
							font-size: 24rpx;
						}
			
						.text-2 {
							font-size: 20rpx;
							color: #666666
						}
			
						.text-3 {
							font-size: 26rpx;
						}
					}
				}
			}
		}
		
		//评论弹幕
		.dan-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index:20;
			height: 113rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			padding-bottom: 15rpx;
		
			// box-shadow:0px 8px 13px 1px rgba(51, 51, 51, 0.35);
			.input-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				height: 60upx;
				background: rgba(237, 237, 237, 1);
				border-radius: 15px;
				position: relative;
		
				.input-cont {
					height: 100%;
					padding-left: 20upx;
				}
		
				.dan-icon {
					position: absolute;
					top: 50%;
					left: 10upx;
					width: 40upx;
					height: 40upx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: -20upx;
					border-radius: 50%;
					background-color: #E24E47;
					color: #fff;
				}
			}
		}
	}
</style>
